<template>
  <div class="customer-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      </el-breadcrumb>
    <el-card>
      <el-form :inline="true" style="margin-bottom: -22px;">
        <el-form-item label="客户编号">
          <el-input v-model="params.like_code" placeholder="客户编号"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="params.like_contactsName" placeholder="联系人名称"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="params.like_productName" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="国际/地区">
          <el-input v-model="params.like_country" placeholder="国际/地区"></el-input>
        </el-form-item>
        <el-form-item label="业务类型">
          <el-input v-model="params.like_businessType" placeholder="业务类型"></el-input>
        </el-form-item>
        <el-form-item label="客户公司名称">
          <el-input v-model="params.like_companyName" placeholder="客户公司名称"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="params.like_phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top:20px;">
      <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
        <span>客户列表</span>
        <div style="display: flex;">
          <el-upload
            v-show="uploadStatus=='none'"
            class="upload-demo"
            style="margin-right: 20px;"
            :show-file-list="false"
            :action="api.uploadUrl"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-progress="handleUploadProgress"
            :on-change="handleUploadChange">
            <el-button type="primary">导入Excel</el-button>
          </el-upload>
          <el-button type="primary" plain v-show="uploadStatus!='none'">
            {{ {ready:'上传Excel...', uploadOver:'保存数据...'}[uploadStatus] }}
          </el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toCreate">新增</el-button>
        </div>
      </div>
      <data-list2
        ref="dataList"
        pageable
        editFormWidth="920px"
        :loadFunc="api.page"
        :parameter="params"
        :deleteFunc="api.delete">
        <template slot="row">
          <el-table-column type="index" align="center" width="50"></el-table-column>

          <el-table-column v-for="field in fields" :key="field.name"
            :prop="field.name" :label="field.label" align="left"  width="150"></el-table-column>

          <el-table-column fixed="right" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-tooltip content="修改" placement="top">
                <el-button size="mini" type="primary" icon="el-icon-edit" circle style="padding:7px;" @click="$refs.dataList.toEdit(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-delete" circle style="padding:7px;" @click="$refs.dataList.toDelete(scope.row, `确认删除客户【${scope.row.contactsName}】?`)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
        <template slot="edit-form" slot-scope="scope">
          <edit :is-edit="scope.isEdit" :id="scope.editDataId" @afterSave="$refs.dataList.afterSave" @afterCancel="$refs.dataList.afterCancel"></edit>
        </template>
      </data-list2>
    </el-card>
  </div>
</template>

<script>

import api from '@/server/customer'
import DataList2 from '@/components/DataList'
import Edit from './components/Edit'

const defaultParams = {
  currPage: 1,
  pageSize: 10
}
export default {
  name: 'customer',
  components: {
    DataList2,
    Edit
  },
  data() {
    return {
      api: api,
      params: Object.assign({}, defaultParams),
      uploadStatus: 'none',
      fields: [
        {name: 'enquiryDate', label: '收到询盘日前'},
        {name: 'code', label: '代码'},
        {name: 'contactsName', label: '联系人名称'},
        {name: 'productName', label: '产品名称'},
        {name: 'fromChina', label: '中国进口'},
        {name: 'procurementPlan', label: '采购计划'},
        {name: 'country', label: '国际/地区'},
        {name: 'companyWebSite', label: '公司网站'},
        {name: 'customerSource', label: '客户来源'},
        {name: 'level', label: '等级'},
        {name: 'businessType', label: '业务类型'},
        {name: 'companyName', label: '客户公司名称'},
        {name: 'email', label: '邮件地址'},
        {name: 'jobTitle', label: '职位'},
        {name: 'contractsType', label: '客户联系类型'},
        {name: 'phone', label: '电话'},
        {name: 'wechat', label: 'wechat'},
        {name: 'whatsapp', label: 'whatsapp'},
        {name: 'skype', label: 'skype'},
        {name: 'facebook', label: 'facebook'},
        {name: 'customerBirthDay', label: '客户生日'},
        {name: 'followStatus1', label: '跟踪状态1'},
        {name: 'followStatus2', label: '跟踪状态2'},
        {name: 'followStatus3', label: '跟踪状态3'}
      ]
    }
  },
  computed: {
  },
  mounted: function() {
  },
  methods: {
    reset() {
      this.params = Object.assign({}, defaultParams)
    },
    query() {
      this.$refs.dataList.query()
    },
    toCreate() {
      this.$refs.dataList.toCreate()
    },
    handleUploadChange(file, fileList){
      console.log('on-change', file, file.status)
      if(file.status=='ready'){
        console.log('on-change', '开始上传')
        this.uploadStatus = 'ready'
      }
    },
    handleUploadSuccess(response, file, fileList){
      console.log('on-success', response, file, file.status)
      this.uploadStatus = 'none'
      this.$message({ message: '导入成功!', type: 'success' })
      this.$refs.dataList.query()
    },
    handleUploadError(err, file, fileList){
      console.log('on-error', err, file, file.status)
      this.uploadStatus = 'none'
    },
    handleUploadProgress(event, file, fileList) {
      // console.log('on-progress', event, file)
      if(event.percent==100){
        console.log('on-progress', 'upload success')
        this.uploadStatus = 'uploadOver'
      }
    }
  }
}
</script>
<style lang="sass" scoped>
.customer-container
  width: 100%
  padding: 20px
  box-sizing: border-box
</style>
